<script setup>
import {ref} from 'vue'
import {
  UserOutlined,
  LockOutlined,
  SafetyOutlined
} from '@ant-design/icons-vue'
import {message} from "ant-design-vue"
import {queryVerify} from "@/api/verify.js"
import {login} from "@/api/emp.js"
import router from "@/router/index.js"
import {useUserStore} from "@/stores/index.js"
import {encrypt} from "@/utils/encryption.js";

const loginLoading = ref(false)
// 验证码
const base64Img = ref('')

// 登录
const loginFormRef = ref()
const loginForm = ref({
  username: '',
  password: '',
  code: '',
  key: ''
})
const resetForm = () => {
  loginFormRef.value.resetFields()
}
const submitLoginForm = () => {
  loginFormRef.value.validate()
    .then(() => {
      loginLoading.value = true
      const data = {
        username: loginForm.value.username,
        password: encrypt(loginForm.value.password),
        code: loginForm.value.code,
        key: loginForm.value.key
      }
      login(data)
        .then(res => {
          if (res.data.code === 1) {
            const userStore = useUserStore()
            userStore.setToken(res.data.data.token)
            userStore.setUserInfo(res.data.data.id,res.data.data.username,res.data.data.auth,res.data.data.avatar)
            message.success('登录成功')
            router.push('/')
          }
        })
        .catch(error => {
          console.log(error)
        })
        .finally(() => {
          loginLoading.value = false
        })
    })
    .catch((error) => {
      console.log(error)
    })
}
const loginFormRules = {
  username: [
    {
      required: true,
      message: '请输入用户名',
      trigger: 'blur'
    },
    {
      pattern: /^[a-zA-Z0-9]{6,16}$/,
      message: '账号格式不正确！',
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur'
    },
    {
      pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d\S]{6,16}$/,
      message: '密码格式不正确！',
      trigger: 'blur'
    }
  ],
  code: [
    {required: true, message: '请输入验证码', trigger: 'blur'},
    {
      pattern: /^[A-Za-z0-9]{4}$/,
      message: '验证码必须为四位英文或数字',
      trigger: 'blur'
    }
  ]
}

// 获取验证码
const getCode = () => {
  queryVerify()
    .then(res => {
      if (res.data.code === 1) {
        loginForm.value.key = res.data.data.key
        base64Img.value = res.data.data.img
      } else {
        message.error('获取验证码频繁，请稍后再试')
      }
    })
    .catch(err => {
      console.log(err)
    })
}
getCode()
</script>

<template>
  <div id="login-page">
    <div class="login-container">
      <div class="login-card">
        <div class="login-title">
          <h2>橙答答后台管理系统</h2>
          <h3>Orange Dada Admin</h3>
        </div>
        <div class="login-content">
          <a-form
            ref="loginFormRef"
            :rules="loginFormRules"
            :model="loginForm"
          >
            <a-form-item
              name="username"
            >
              <a-input v-model:value="loginForm.username" placeholder="请输入用户名">
                <template #prefix>
                  <user-outlined/>
                </template>
              </a-input>
            </a-form-item>

            <a-form-item
              name="password"
            >
              <a-input-password v-model:value="loginForm.password" placeholder="请输入密码">
                <template #prefix>
                  <lock-outlined/>
                </template>
              </a-input-password>
            </a-form-item>

            <div class="code-container">
              <a-form-item name="code">
                <a-input v-model:value="loginForm.code" placeholder="请输入验证码" style="width: 200px">
                  <template #prefix>
                    <SafetyOutlined/>
                  </template>
                </a-input>
              </a-form-item>
              <img v-if="base64Img" :src="'data:image/png;base64,' + base64Img" alt="" @click="getCode" class="code">
              <img v-else src="/src/assets/img/code_fail.png" alt="" class="code">
            </div>
          </a-form>
          <div class="login-footer">
            <a-button type="primary" class="btn" @click="submitLoginForm" :loading="loginLoading">登录</a-button>
            <a-button type="default" class="btn" @click="resetForm">重置</a-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #f0f2f5 url("../../assets/img/background.svg") no-repeat;
  background-size: 100% 100%;
}

.login-card {
  width: 400px;
  height: 330px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.login-title {
  padding: 20px;
  height: 50px;
  background: linear-gradient(90deg, #28c5fd, #0916ff);
  border-radius: 10px 10px 0 0;
  color: #fff;
}

.login-content {
  padding: 20px;
}

.login-footer {
  display: flex;
  justify-content: space-between;
}

.login-footer .btn {
  width: 165px;
}

.code-container {
  display: flex;
  justify-content: space-between;
}

.code {
  height: 35px;
  width: 100px;
}
</style>
